<template>
  <div class="table-container mediumtablestyle">
    <div class="table">
      <!-- <el-table :data="XDCTableList4" border :row-style="iRowStyle"> -->
      <el-table
        :data="XDCTableList1"
        border
        :row-style="{height:'0'}"
        :cell-style="{padding:'0'}"
        :header-cell-style="{fontSize:'16'}"
      >
        <el-table-column prop="name" label="蓄电池名称"></el-table-column>
        <el-table-column prop="value" label="蓄电池浮充电压">
          <template slot-scope="scope">
            <div>{{scope.row.value + (scope.row.unit||'')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table">
      <el-table :data="XDCTableList2" border :row-style="{height:'0'}" :cell-style="{padding:'0'}">
        <el-table-column prop="name" label="蓄电池名称"></el-table-column>
        <el-table-column prop="value" label="蓄电池浮充电压">
          <template slot-scope="scope">
            <div>{{scope.row.value + (scope.row.unit||'')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table">
      <el-table :data="XDCTableList3" border :row-style="{height:'0'}" :cell-style="{padding:'0'}">
        <el-table-column prop="name" label="蓄电池名称"></el-table-column>
        <el-table-column prop="value" label="蓄电池浮充电压">
          <template slot-scope="scope">
            <div>{{scope.row.value + (scope.row.unit||'')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table">
      <el-table :data="XDCTableList4" border :row-style="{height:'0'}" :cell-style="{padding:'0'}">
        <el-table-column prop="name" label="蓄电池名称"></el-table-column>
        <el-table-column prop="value" label="蓄电池浮充电压">
          <template slot-scope="scope">
            <div>{{scope.row.value + (scope.row.unit||'')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog>
      
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
// import { log } from "three";

@Component
export default class extends Vue {
  @Prop() Table!: any;
  public XDCTableList: any = [];
  public XDCTableList1: any = [];
  public XDCTableList2: any = [];
  public XDCTableList3: any = [];
  public XDCTableList4: any = [];
  mounted() {}
  @Watch("Table")
  private TableText(val: string) {
    var leng = val.length;
    var yv = leng % 4;
    var cs = (leng - yv) / 4;
    console.log(leng, yv, cs, 12313213);
    if (yv == 0) {
      console.log(11);

      this.XDCTableList1 = val.slice(0, cs);
      this.XDCTableList2 = val.slice(cs, 2 * cs);
      this.XDCTableList3 = val.slice(2 * cs, 3 * cs);
      this.XDCTableList4 = val.slice(3 * cs, 4 * cs);
    }
    if (yv == 1) {
      this.XDCTableList1 = val.slice(0, cs + 1);
      this.XDCTableList2 = val.slice(cs + 1, 2 * cs + 1);
      this.XDCTableList3 = val.slice(2 * cs + 1, 3 * cs + 1);
      this.XDCTableList4 = val.slice(3 * cs + 1, 4 * cs + 1);
    }
    if (yv == 2) {
      this.XDCTableList1 = val.slice(0, cs + 1);
      this.XDCTableList2 = val.slice(cs + 1, 2 * cs + 2);
      this.XDCTableList3 = val.slice(2 * cs + 2, 3 * cs + 2);
      this.XDCTableList4 = val.slice(3 * cs + 2, 4 * cs + 2);
    }
    if (yv == 3) {
      this.XDCTableList1 = val.slice(0, cs + 1);
      this.XDCTableList2 = val.slice(cs + 1, 2 * cs + 2);
      this.XDCTableList3 = val.slice(2 * cs + 2, 3 * cs + 3);
      this.XDCTableList4 = val.slice(3 * cs + 3, 4 * cs + 3);
    }
    // console.log(this.XDCTableList4);
  }
  
}
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  height: 100%;
  display: flex;
  // justify-content: space-around;
  box-sizing: border-box;
  padding-left: 0.3rem;
  > div {
    height: 100%;
    padding: 0 0.2rem;
    width: 24.9%;
    overflow: auto;
    box-sizing: border-box;
    border-right: 1px solid rgba(12, 175, 232, 0.3);
  }
  > div:nth-child(4) {
    border-right: none;
  }
  // .el-table .cell {
  //   line-height: 0.18rem !important;
  // }
}
</style>
<style lang="scss" >
.table-container {
  .el-table td,
  .el-table th {
    padding: 0;
  }
  .el-table .cell {
    line-height: 0.23rem;
  }
}
.mediumtablestyle .el-table th > .cell,
.mediumtablestyle .el-table td div {
  font-size: 0.16rem;
}
</style>

